<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>method rule</title>


    <link rel="stylesheet" href="./static/bootstrap.min.css">
    <link rel="stylesheet" href="./static/method_rule.css">
    <script src="./static/jquery-1.7.2.js"></script>
    <script src="./static/bootstrap.js"></script>
    <script src="./static/vue.js"></script>
    <script src="./static/axios.min.js"></script>
    <script src="./static/agent.base.js"></script>
    <script>
        let v;
        window.onload = function () {
            v = new Vue({
                el: '#box',
                data: {
                    serverData: [],
                    current_id:-1,
                    source_code:"1"
                },
                methods: {
                    add:function () {
                        add();
                    },
                    sync_rule:function(ruleId){
                        sync_rule(ruleId);
                    },
                    modify:function(){
                        modify();
                    },
                    deleteMethodRule:function(current_id){
                        deleteMethodRule(current_id);
                    },
                    detail:function(source_code){
                        $("#detail-source-code").val(source_code)
                    },
                    modify_pre:function(id, sourceCode){
                        source_code = sourceCode
                        $("#modify-id").val(id)
                        $("#modify-source-code").val(sourceCode);
                    },
                    to_index:function(){
                        window.location.href = "index.html"
                    }
                }
            });

            loadData()
        };

        function loadData() {
            let serverId = getQueryString("id")
            request_uri.method_rule_list.request({serverId}, pushData)
        }

        function pushData(result) {
            v.serverData = result.data.content
        }

        function add(){
            let remoteServerId = getQueryString("id");
            let rule = $("#rule").val();
            let ruleType = $("#rule-type").val()
            let description = $("#description").val();
            let sourceCode = $("#source-code").val();
            let classReference = $("#class-reference").val();

            let req = {remoteServerId, rule, ruleType, description, sourceCode, classReference};
            request_uri.add_method_rule.request(req, base_callback)

            location.reload()

        }

        function sync_rule(ruleId){
            let methodRuleId = ruleId;
            request_uri.sync_method_rule.request({methodRuleId}, base_callback)
        }

        function modify(){
            let id = $("#modify-id").val()
            let sourceCode = $("#modify-source-code").val();
            let req = {id, sourceCode};
            request_uri.modify_method_rule.request(req, base_callback)
            location.reload()

        }

        function deleteMethodRule(current_id){
            let id = current_id;
            let req = {id};
            request_uri.delete_method_rule.request(req, base_callback)
            location.reload()

        }

        // 获取html传参
        function getQueryString(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
        // alert(GetQueryString('id'))
    </script>
</head>
<body>

<div class="container" id="box">
    <input type="button" value="add method rule" class="btn btn-default" data-toggle="modal" data-target="#layer"  >
    <input type="button" value="to index" class="btn btn-link"  v-on:click="to_index()"  >

    <hr>
    <table class="table table-bordered table-hover">
        <caption class="h1 text-info">METHOD RULE</caption>
        <tr class="text-danger">
            <th class="text-center">ID</th>
            <th class="text-center">rule name</th>
            <th class="text-center">rule type</th>
            <th class="text-center">description</th>
            <th class="text-center">source code</th>
            <th class="text-center">operation</th>
        </tr>
        <tr class="text-center" v-for="item in serverData">
            <td class="text-td"  style="width:170px;">{{item.id}}</td>
            <td class="text-td"  style="width:100px;">{{item.ruleName}}</td>
            <td class="text-td"  style="width:100px;">{{item.ruleType === 1 ? 'code block' : 'class'}}</td>
            <td class="text-td"  style="width:200px;">{{item.description}}</td>
            <td class="text-td"  style="width:500px;" >{{item.sourceCode}}</td>
            <td>
                <button class="btn btn-success btn-sm" data-toggle="modal" v-on:click="sync_rule(item.id)" >sync </button>
                <button class="btn btn-primary btn-sm" data-toggle="modal" v-show="item.ruleType === 1"  data-target="#modify-modal" v-on:click="modify_pre(item.id, item.sourceCode)" >modify </button>
                <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#delete-modal"  v-on:click="current_id=item.id" >delete </button>
                <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#detail-modal"  v-on:click="detail(item.sourceCode)" >source code </button>
            </td>
        </tr>

        <tr v-show="serverData.length==0">
            <td colspan="6" class="text-center text-muted">
                <p>none....</p>
            </td>
        </tr>
    </table>
    <div role="dialog" class="modal fade bs-example-modal-sm" id="modify-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">modify method rule source code </h4>
                </div>
                <div class="modal-body text-right">
                    <input type="hidden" id="modify-id">

                    <form role="form" class="form">
                        <div class="form-group-area">
                            <label for="modify-source-code" class="label-name">source code</label>
                            <textarea id="modify-source-code" class="form-control" placeholder="source-code"></textarea>
                        </div>
                    </form>
                    <form role="form" class="form-btn">
                        <div>
                            <input type="button" value="save" class="btn btn-primary" v-on:click="modify()">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>




    <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">add  method rule</h4>
                </div>
                <div class="modal-body text-right">
                    <form role="form" class="form">
                        <div class="form-group">
                            <label for="rule" class="label-name">rule</label>
                            <select id="rule" class="form-control">
                                <option value ="2">replace</option>
                                <option value ="0">before</option>
                                <option value="3">after</option>
                            </select>
                        </div>
                        <div class="form-group col-md-offset-1">
                            <label for="rule-type" class="label-name">rule type</label>
                            <select id="rule-type" class="form-control">
                                <option value ="1">java code block</option>
                                <option value ="0">java class</option>
                            </select>
                        </div>
                    </form>
                    <form role="form" class="form">

                        <div class="form-group">
                            <label for="description" class="label-name">description</label>
                            <input type="text" id="description" class="form-control" placeholder="description">
                        </div>
                        <div class="form-group col-md-offset-1">
                            <label for="class-reference" class="label-name">class</label>
                            <input type="text" id="class-reference" class="form-control" placeholder="class reference ">

                        </div>

                    </form>
                    <form role="form" class="form">
                        <div class="form-group-area">
                            <label for="source-code" class="label-name-area">source code</label>
                            <textarea id="source-code" class="form-control"
                                      placeholder="1. you  must implement com.zhangdy.agent.common.handler.ICustomizeHandler if source code is java class
2. you must include {   }  if source code is java code block "></textarea>

                        </div>
                    </form>
                    <form role="form" class="form-btn">
                        <div>
                            <input type="button" value="add" class="btn btn-primary" v-on:click="add()">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div role="dialog" class="modal fade bs-example-modal-sm" id="delete-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">confirm delete?</h4>
                </div>
                <div class="modal-body text-right">
                    <button data-dismiss="modal" class="btn btn-primary btn-sm">cancel</button>
                    <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMethodRule(current_id)">confirm</button>
                </div>
            </div>
        </div>
    </div>



    <div role="dialog" class="modal fade bs-example-modal-sm" id="detail-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title"> method rule source code</h4>
                </div>
                <div class="modal-body text-right">

                    <form role="form" class="form">
                        <div class="form-group-area">
                            <label for="detail-source-code" class="label-name">source code</label>
                            <textarea id="detail-source-code" class="form-control"    ></textarea>
                        </div>
                    </form>
                    <form role="form" class="form-btn">
                        <div>
                            <button data-dismiss="modal" class="btn btn-primary btn-sm">close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



</div>
</body>
</html>